<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="500px" height="500px" style="border: 1px solid #ccc;"></canvas>
	<canvas id="mycanvas2" width="800px" height="800px" style="border: 1px solid #ccc;"></canvas>
	<canvas id="mycanvas3" width="800px" height="800px" style="border: 1px solid #ccc;"></canvas>
</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas');
	var context = canvas.getContext("2d");
	var g1 = context.createLinearGradient(0,0,0,400)
	g1.addColorStop(0.1,"rgb(255,255,0)");
	g1.addColorStop(0.3,"rgb(0,255,255)");
	context.fillStyle = g1
	context.fillRect(0,0,400,400)

	var g2 = context.createLinearGradient(0,0,400,0)
	g2.addColorStop(0,"rgb(254,67,101,0.25)")
	g2.addColorStop(1,"rgb(252,157,154,0.25)")

	for (var i=1;i<=10;i++) {
		context.fillStyle = g2
		context.arc(i*25,i*25,i*10,0,2*Math.PI)
		context.fill()
	}
</script>

<script type="text/javascript">
	var canvas = document.getElementById('mycanvas2');
	var context = canvas.getContext("2d");
	var g2 = context.createRadialGradient(200,100,50,200,100,150)
	g2.addColorStop(0.1,"rgb(252,157,154)");
	g2.addColorStop(0.3,"rgb(200,200,169)");
	g2.addColorStop(1,"rgb(131,175,155)");
	context.fillStyle = g2
	context.fillRect(0,0,500,500)
	context.strokeRect(20,20,200,100);
	context.scale(2,2)
	context.strokeRect(20,20,200,100)
</script>